<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>基于Flask的图像分类</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="static/css/style.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="static/css/font-awesome.css" rel="stylesheet">
   <!-- 在线jquery，必要时换成本地的 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <!-- <script src="./static/js/jquery.1.12.4.min.js"></script> -->
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link rel="stylesheet" type="text/css" href="static/css/upload.css">


</head>

<body>

    <!-- mian-content -->
    <div class="main-banner" id="home">

        <!--/banner-->
        <div class="banner-info">
            <div class="w3pvt-logo text-center">
                <h1> <a href="http://127.0.0.1:5000/">PROJECT</a></h1>
            </div>
            <div class="middile-inner-con">
                <div class="tab-main mx-auto">

                    <input id="tab1" type="radio" name="tabs" class="w3layouts-sm" checked>
                    <label for="tab1"><span class="fa fa-arrow-circle-o-up " aria-hidden="true"></span>Upload</label>

                    <input id="tab2" type="radio" class="w3layouts-sm" name="tabs">
                    <label for="tab2"><span class="fa fa-caret-square-o-down " aria-hidden="true"></span>Show</label>

                    <!-- <input id="tab3" type="radio" class="w3layouts-sm" name="tabs">
                    <label for="tab3"><span class="fa fa-files-o" aria-hidden="true"></span>Information</label> -->
                    <input id="tab4" type="radio" class="w3layouts-sm" name="tabs">
                    <label for="tab4"><span class="fa fa-envelope" aria-hidden="true"></span> Contact</label>
                    <!--第一部分-->
                    <section id="content1" class="inner-w3layouts-wrap">
                        <h3 class="head-w3ls">上传图片</h3>

                           <input id="upload_input" class="admin img-fluid" type="file"  onchange="changePicture(this)">
                            <img id="up_img" src="static/images/up2.png" style="width:30%;height: 30%" alt="mobile-image">


                        <h4 style="height: 20px"><button onclick="confirm_up()">确定上传</button></h4>
                        <h2>uploading...</h2>
                        <h3 id="up_success" style="height: 20px;"></h3>

                    </section>


                     <!--第二部分-->
                    <section id="content2" class="inner-w3layouts-wrap">
                        <h3 class="head-w3ls">展示图片</h3>

                          <img src="static/images/banner1.jpg" alt="news image" id="show_img" >

                        <dir style="height: 10px"></dir>
                        <p id="recg" style="height: 20px;color: darkgreen"> 分类 </p>

                        <dir style="height: 80px"></dir>
                        <h3 class="head-w3ls">获得的信息</h3>
                        <p>运行时间：10 秒  详细情况：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis mollis arcu, vel vulputate justo consectetur quis. Donec quis fringilla arcu lorem ipsum dolor sit amet nullam. Consequat adipiscing phasellus.</p>
                     
                    </section>

                       <!--第三部分-->
                   <!--  <section id="content3" class="inner-w3layouts-wrap">
                        <h3 class="head-w3ls">获得的信息</h3>
                        <p>运行时间：10 秒  详细情况：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis mollis arcu, vel vulputate justo consectetur quis. Donec quis fringilla arcu lorem ipsum dolor sit amet nullam. Consequat adipiscing phasellus.
                            Donec cursus nunc ut rhoncus volutpat. Suspendisse dictum volutpat orci sit amet consequat. Duis fermentum urna et ligula lacinia faucibus efficitur non sapien. Nulla cursus arcu sapien. Nulla luctus tellus dapibus erat tincidunt feugiat. Suspendisse potenti lorem ipsum dolor. Magna sed risus bibendum, ullamcorper risus eget, accumsan odio. Ut ornare mi aliquet, ultrices velit vitae tempor augue </p>
                    </section>
 -->
                        
                    <!-- 第四部分 -->
                    <section id="content4" class="inner-w3layouts-wrap">
                        <h3 class="head-w3ls"> 意见反馈</h3>
                        <form name="contact-form" class="contact-form" method="post" action="#">
                            <div class="row">
                                <div class="col-6 con-gd">
                                    <div class="form-group">
                                        <p>Name *</p>
                                        <input type="text" class="form-control" id="name" placeholder="" name="name" required="">
                                    </div>
                                    <div class="form-group">
                                        <p>Email *</p>
                                        <input type="email" class="form-control" id="email" placeholder="" name="email" required="">
                                    </div>

                                </div>
                                <div class="col-6 con-gd">
                                    <div class="form-group">
                                        <p>Send a Message *</p>
                                        <textarea name="Message" placeholder="" required=""></textarea>
                                    </div>

                                </div>

                            </div>
                            <div class="form-group">

                                <button type="submit" class="btn btn-default">Submit</button>
                            </div>

                        </form>
                        <ul class="w3pvt_social_list list-unstyled mt-4">
                            <li>
                                <a href="#" class="w3layouts-icon">
                                    <span class="fa fa-qq"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="w3layouts-icon">
                                    <span class="fa fa-weixin"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="w3layouts-icon">
                                    <span class="fa fa-weibo"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="w3layouts-icon">
                                    <span class="fa fa-envelope-o"></span>
                                </a>
                            </li>
                        </ul>
                    </section>

                </div>
                <!--// banner-inner -->
            </div>
        </div>
        <div class="copy-w3layouts-right text-center pb-3">
            <p >Copyright &copy; 2019.Company name All rights reserved.</p>

        </div>
    </div>
    <!--//main-content-->


</body>
<!-- js -->

  <script type="text/javascript">
     function changePicture() {
            var readfile=new FileReader();
            var f=document.getElementById('upload_input').files[0];
            readfile.readAsDataURL(f);
            readfile.onload=function (e) {
                document.getElementById('up_img').src=this.result;
            }
        }
    function confirm_up() {
            var formData=new FormData();
            var f=document.getElementById('upload_input').files[0];
            formData.append('img',f)
            $.ajax({
                url:"{{ url_for('upload_img') }}",
                data:formData,
                cache:false,
                processData:false,
                contentType:false,
                type:'POST',
                success:function (data) {
                    if(data.signal==1){
                        document.getElementById('up_success').innerHTML='<h3 id="up_success" style="height: 20px;color: darkgreen">上传成功</h3>'
                        document.getElementById('show_img').src=data.img_path
                        document.getElementById('recg').innerHTML=data.recg
                        
                    }

                }
            })

        }
    </script>
</html>
